<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>圆环</title>
    <style>
        body { background: #000}
        #canvas { border: 1px solid #fff; display: block; margin: 50px auto;background: #ffffff }
    </style>
</head>
<body>
    <div id="canvas-warp">
        <canvas id="canvas">
            你的浏览器不支持canvas！
        </canvas>
    </div>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        context.shadowColor = "#545454";
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur = 2;

        context.arc( 400 , 300 , 200 , 0 , Math.PI * 2 , false);
        context.arc( 400 , 300 , 230 , 0 , Math.PI * 2 , true);
        context.fillStyle = "#00AAAA";
        context.fill();
    }
</script>
</body>
</html>